<template>
    <div>
        <Header />
        <div class="collect-box">
            <div class="title">我的收藏</div>
            <el-table ref="multipleTable" :data="collectList" tooltip-effect="dark" style="width: 100%;margin-bottom:10px" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center" width="60">
                </el-table-column>
                <el-table-column align="center" label="序号" type="index" width="60">
                </el-table-column>
                <el-table-column prop="name" align="center" label="书名" min-width="130">
                    <template slot-scope="scope">
                        《{{ scope.row.name }}》
                    </template>
                </el-table-column>
                <el-table-column align="center" label="价格" min-width="100">
                    <template slot-scope="scope">
                        {{ scope.row.price }} 元
                    </template>
                </el-table-column>
                <el-table-column align="center" label="介绍" min-width="90">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="" height="50px">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="90">
                    <template slot-scope="scope">
                        <el-button style="color:#F56C6C" type="text" size="small" @click="cancelCollect(0,scope.row.id)">取消收藏</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px">
                <el-button type="danger" :disabled="!selectedIds.length" size="small" @click="cancelCollect(1)">批量取消收藏</el-button>
            </div>
        </div>
        <Footer />
    </div>
</template>

<script>
import { get, delJSON } from "@/utils/request";
import Header from "@/views/Components/Header/index.vue";
import Footer from "@/views/Components/Footer/index.vue";
export default {
    data() {
        return {
            collectList: [],
            selectedIds: [],
        };
    },
    components: {
        Header,
        Footer,
    },
    created() {
        this.getCollectList();
    },
    methods: {
        // 获取用户收藏信息
        getCollectList() {
            this.collectList = [];
            get("/collect/").then((res) => {
                if (res && res.data) {
                    this.collectList = res.data;
                }
            });
        },

        handleSelectionChange(val) {
            let arr = [];
            val.forEach((item) => {
                arr.push(item.id);
            });
            this.selectedIds = arr;
        },
        // 批量取消收藏
        cancelCollect(num, val) {
            let ids = [];
            if (num === 1) {
                ids = this.selectedIds;
            } else {
                ids[0] = val;
            }

            this.$confirm("此操作将取消收藏信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delJSON("/collect/", ids).then((res) => {
                        if (res && res.message == "ok") {
                            this.$message({
                                message: "取消收藏成功！",
                                type: "success",
                            });
                            this.getCollectList();
                        }
                    });
                })
                .catch(() => {
                    this.$message.error("取消收藏失败！");
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.collect-box {
    min-height: calc(100vh - 300px);
    .title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin: 10px 0;
    }
    width: 80%;
    margin: 0 auto;
}
</style>
